<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <h1>1.列表渲染- v-for 遍历数组</h1>
      <!-- <ul>
        <li v-for="(item, index) in list">
          <p>{{ index + 1 }}.姓名:{{ item.name }}</p>
          <p>工资:{{ item.salary }}</p>
        </li>
      </ul> -->
      <ul>
        <li v-for="item in list">
          <p>姓名:{{ item.name }}</p>
          <p>工资:{{ item.salary }}</p>
        </li>
      </ul>

      <h1>2.列表渲染- v-for 遍历对象</h1>
      <ul>
        <li v-for="(value, key, index) in goods">
          <p>{{ index + 1 }}键名:{{ key }}</p>
          <p>键值:{{ value }}</p>
        </li>
      </ul>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        list: [
          {
            name: "马云",
            salary: 2000,
          },
          {
            name: "刘强东",
            salary: 3000,
          },
          {
            name: "小马哥",
            salary: 4000,
          },
        ],
        goods: {
          name: "罗老师",
          tel: "锤子手机",
          price: "1999",
        },
      },
    });
  </script>
</html>
